<template>
  <section>
    <el-form :rules="rules" ref="customer" :model="customer" label-width="80px">
      <el-form-item label="姓名"  prop="name">
        <el-input size="mini" v-model="customer.name" style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="customer.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-row style="width: 100%;border:0px solid red;">
          <el-col :span="8" style="border:0px solid red;">
            <el-input size="mini" v-model="customer.phone" style="width: 250px"/>
          </el-col>
          <el-col :span="10" v-if="tag === 'member' && !customer.id">
            <el-button size="mini" type="text" @click="getVCode" :disabled="showTime">获取验证码</el-button>
            <span :span="3" v-if="showTime">{{countdownUi}}</span>
          </el-col>
        </el-row>

        <el-row v-if="tag === 'member' && !customer.id">
          <el-input size="mini" v-model="customer.vcode" placeholder="请输入验证码" style="width: 200px"/>
        </el-row>
      </el-form-item>
      <el-form-item label="生日">
        <el-input size="mini" v-model="customer.birthday" style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="邮件">
        <el-input size="mini" v-model="customer.email" style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="婚姻">
        <el-switch size="mini" v-model="customer.isMarried" active-text="已婚" inactive-text="未婚"/>
      </el-form-item>
      <el-form-item label=" ">
        <el-button :type="customer.id?'success':'primary'" @click="createCustomer('customer')" size="mini">{{customer.id?'保存':'创建'}}</el-button>
        <el-button @click="resetForm('customer')" size="mini">重置</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import VCode from '@/common/VCode'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  export default {
    name: "createUserDialog",
    props:['tag','customer'],
    components: {},
    data() {
      return {
        countdownUi:10,
        showTime:false,
        // userForm:{ name:'', gender:'', phone:'', birthday:'', email:'', isMarried:''},
        rules: {
          name: [
            {required: true, message: '请输入姓名', trigger: 'blur'},
            {min: 1, max: 10, message: '长度在 2 到 5 个字符', trigger: 'blur'}
          ],
          gender:[
            { required: true, message: '请确认性别', trigger: 'change' }
          ],
          phone:[
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {min: 11, max: 11, message: '长度为11', trigger: 'blur'}
          ],
        }
      }
    },
    created(){
      console.log('————————————',this.customer)
    },
    watch:{
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      createCustomer(customer){
        console.log(this.customer)
        this.$refs[customer].validate((valid) => {
          if (valid) {
            console.log(this.customer)
            this.$emit('confirm',this.customer)
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      resetForm(customer){
        this.$refs[customer].resetFields()
      },
      countdown(){
        this.showTime=true
        let time = setInterval(()=>{
          if(this.countdownUi >0 ){
            this.countdownUi --
          }else {
            this.showTime=false
            clearInterval(time)
          }
        },1000)
      },
      getVCode(){
        if(VCode.judgeEmail(this.customer.phone)){
          this.countdown()//倒计时
          if(this.customer.id){
            this.sendVCByBindingCustomer(this.customer.phone,this.customer.id)
          }else {
            this.phoneVCode(this.customer.phone)
          }
        }else {
          console.log('错啦')
          this.$message({type:'error',message:'手机号码不正确！'})
        }
      },
      sendVCByBindingCustomer(phone,customerId){
        this.fetch({name:"sendVCByBindingCustomer",data:{phone,customerId}})
          .then(res=>{
            console.log('获取验证码——————————',res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      phoneVCode(phone){
        this.fetch({name:"phoneVCode",data:{phone}})
          .then(res=>{
            console.log('获取验证码——————————',res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
